<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="$request.getContextPath()/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="$request.getContextPath()/resources/jquery/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="$request.getContextPath()/resources/bootstrap/js/bootstrap.min.js"></script>

<script src="$request.getContextPath()/resources/highcharts/highcharts.js"></script>
<script src="$request.getContextPath()/resources/highcharts/modules/exporting.js"></script>

<title>性别统计</title>
<style type="text/css">
body,.container-fluid{
   width: 100%;
   height: 100%;
   position: absolute;
   padding:0px;
   margin:0px;
}
#sexContainer{
   width: 100%;
   height: 100%;
   padding:0px;
   margin:0px;
}
</style>
<script type="text/javascript">
function loadSexContainer(){
	 $('#sexContainer').highcharts({
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false,
	            type: 'pie'
	        },
	        title: {
	            text: '性别统计图'
	        },
	        tooltip: {
	            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
	        },
	        plotOptions: {
	            pie: {
	                allowPointSelect: true,
	                cursor: 'pointer',
	                dataLabels: {
	                    enabled: true,
	                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
	                    style: {
	                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
	                    }
	                }
	            }
	        },
	        series: [{
	            name: '比例',
	            colorByPoint: true,
	            data: [{
	                name: '男性',
	                y: 56.33
	            }, {
	                name: '女性',
	                y: 24.03,
	                sliced: true,
	                selected: true
	            }, {
	                name: '未知',
	                y: 10.38
	            }]
	        }]
	    });
}
$(function(){
	//如果当前窗口不是顶层窗口 则不自动加载
	if(top.window==self.window){
		loadSexContainer();
	}
	setTimeout(loadSexContainer, 4000);
});
</script>
</head>
<body>
<div class="container-fluid">
   <div id="sexContainer"></div>
</div>
</body>
</html>